<template>
	<view class="container">
		<!-- 内容区域 -->
		<view class="content">
			<!-- 订单信息卡片 -->
			<view class="info-card">
				<u-cell-group :border="false">
					<u-cell-item title="订单号" :value="orderInfo.PcRegNo" :title-style="titleStyle"
						:value-style="valueStyle" :arrow="false">
					</u-cell-item>
					<u-cell-item title="套餐名称" :value="orderInfo.PcTestName" :title-style="titleStyle"
						:value-style="valueStyle" :arrow="false">
					</u-cell-item>
					<u-cell-item title="创建时间" :value="formatTime(orderInfo.PcCreateDatetime)" :title-style="titleStyle"
						:value-style="valueStyle" :arrow="false">
					</u-cell-item>
				</u-cell-group>
			</view>

			<!-- 价格信息卡片 -->
			<view class="price-card">
				<view class="price-item">
					<text class="label">单价：</text>
					<text class="value price-color">¥{{ orderInfo.PcAmount }}</text>
				</view>
				<view class="price-item">
					<text class="label">数量：</text>
					<text class="value">x{{ orderInfo.PcBuyCount }}</text>
				</view>
				<view class="price-item total">
					<text class="label">总价：</text>
					<text class="value total-price">¥{{ orderInfo.PcAllPrice }}</text>
				</view>
			</view>

			<!-- 取消支付 -->
			<view class="qrcode-card2" :class="statusClass" v-if="orderInfo.PcStatus==1" style="text-align: center;display: flex;">
				<view class="" style="width: 50%;">
					<u-button type="primary" size="medium" @click="showOrderConfirm = true">提交支付</u-button>
				</view>
				<view class="" style="width: 50%;">
					<u-button type="primary" size="medium"  @click="cancel">取消订单</u-button>
				</view>
				

			</view>

			<view class="qrcode-card" :class="statusClass" v-if="orderInfo.PcStatus==2">
				<view class="qrcode-box">
					<text class="status-text">{{ statusText }}</text>
					<!-- <uv-qrcode
						ref="qrcode"
						size="320"
						:value="orderInfo.PcStatus"
						:icon="require('@/static/logo.png')"
						iconSize="40"
						borderRadius="8"
					></uv-qrcode> -->
					<uv-qrcode ref="qrcode" size="400rpx" :value="orderInfo.PcRegNo"></uv-qrcode>
					<text class="tip-text">请向工作人员出示二维码</text>
				</view>
			</view>
			<u-modal v-model="showOrderConfirm" title="确认订单" :show-cancel-button="true" cancel-text="再想想" confirm-text=""
				:async-close="true" @cancel="showOrderConfirm = false">
				<view class="order-modal-content">
					<!-- 订单信息 -->
					<view class="order-info">
						<view class="info-item">
							<text class="label">商品名称：</text>
							<text class="value">{{orderInfo.PcTestName}}</text>
						</view>
						<view class="info-item">
							<text class="label">订单金额：</text>
							<text class="value price">￥{{ orderInfo.PcAmount*orderInfo.PcBuyCount }}</text>
						</view>
						<view class="info-item">
							<text class="label">购买数量：</text>
							<text class="value">{{orderInfo.PcBuyCount}}份</text>
						</view>
					</view>
			
					<!-- 支付方式选择 -->
					<view class="payment-methods">
						<text class="payment-title">选择支付方式</text>
						<view class="payment-item wechat-pay" @click="selectedPayment = 'wechat'"
							:class="{active: selectedPayment === 'wechat'}">
							<u-icon name="weixin-fill" color="#09BB07" size="42"></u-icon>
							<text class="payment-name">微信支付</text>
							<u-icon :name="selectedPayment === 'wechat' ? 'checkbox-mark' : 'circle'" color="#09BB07"
								size="36"></u-icon>
						</view>
					</view>
				</view>
			
				<!-- 自定义底部按钮 -->
				<template #confirm-button>
					<view class="confirm-footer">
						<u-button type="primary" shape="circle" :loading="payLoading" @click="payment()"
							custom-style="width: 100%;height: 80rpx;">
							{{ payLoading ? '支付中...' : '立即支付' }}
						</u-button>
					</view>
				</template>
			</u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payLoading: false,
				selectedPayment: 'wechat', 
				showOrderConfirm:false,
				titleStyle: {
					color: '#909399',
					fontSize: '14px'
				},
				valueStyle: {
					color: '#606266',
					fontSize: '14px'
				},
				orderInfo: {
					PcAllPrice: '',
					PcAmount: '',
					PcBuyCount: '',
					PcCreateDatetime: '2023-08-15 14:30:00',
					PcRegNo: "",
					PcTestName: "",
					PcStatus: "",
					PcRecordId:'',

				}
			};
		},
		onLoad(options) {
			console.log(options)
			this.orderInfo.PcRecordId = options.PcRecordId
			this.orderInfo.PcAllPrice = options.PcAllPrice
			this.orderInfo.PcAmount = options.PcAmount
			this.orderInfo.PcBuyCount = options.PcBuyCount
			this.orderInfo.PcCreateDatetime =options.PcCreateDatetime
			
			this.orderInfo.PcRegNo = options.PcRegNo
			this.orderInfo.PcTestName = options.PcTestName
			this.orderInfo.PcStatus = options.PcStatus
			// this.getOrderDetail(options.orderId);
		},
		methods: {
			formatTime(isoString) {
			      const date = new Date(isoString);
			      return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}秒`;
			    },
			  
			cancel() {
				this.$request("Package", "RefundOrder", {
					PcRecordId:this.orderInfo.PcRecordId
				}).then(res => {
			
					if (res.code == 1) {
						uni.showToast({
							title: '取消成功',
							icon: 'none',
							duration: 2000
						});
						setTimeout(function() {
							uni.navigateTo({
								url: `/pages/canteen/canteenList`,
								fail(error) {
									console.log(error)
								}
							})
							return
						}, 1000);
						
					}else{
						
						uni.showToast({
							title: '取消失败',
							icon: 'none',
							duration: 2000
						});
					}
				})	
			},
			
			payment() {
				// uni.redirectTo({
				// 	url: `/pages/payment/ddzf?OrderNo=${OrderNumber}`,
				// 	fail(error) {
				// 		console.log(error)
				// 	}
				// })
				// return
				this.$request("pay", "pay", {
					PcRegNo:this.orderInfo.PcRegNo
				}).then(resa => {
					console.log("订单号", resa)
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
							"appId": resa.data.appId, //公众号ID，由商户传入     
							"timeStamp": resa.data.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": resa.data.nonceStr, //随机串     
							"package": resa.data.package,
							"signType": resa.data.signType, //微信签名方式：     
							"paySign": resa.data.paySign //微信签名 
						},
						function(res) {
							// then.sss=res
							// console.log("支付",res)
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								uni.showToast({
									title: "成功支付",
									icon: "none",
									duration: 1000,
								});
								setTimeout(function() {
									uni.redirectTo({
										url: `/pages/canteen/canteenList?current=${1}`,
										fail(error) {
											console.log(error)
										}
									})
									return
								}, 1000);
								
			
							} else {
								uni.showToast({
									title: "支付未成功",
									icon: "none",
									duration: 1000,
								});
								setTimeout(function() {
									uni.redirectTo({
										url: `/pages/canteen/canteenList?current=${0}`,
										fail(error) {
											console.log(error)
										}
									})
									return
								}, 1000);
							}
						});
				})
				// uni.login({
				//     success: async resCode => {
				// 		console.log("rescode",resCode)
				//         let res = await this.$request('auth', 'getopenid', {
				//             Code: resCode.code
				//         });
			
				//         if (res.code === 1) {
				// 			console.log("res",res)
				//             this.appid = res.data.appid;
				//             this.sessionkey = res.data.session_key;
				//             this.openid = res.data.openid;
				// 			if(GHF==0){
				// 				return
				// 			}else{
				// 				this.pays()
				// 			}
			
				//         }
				//     }
				// })
			},
		},
		computed: {
			statusClass() {
				return {
					'unpaid': this.orderInfo.PcStatus == 1,
					'processing': this.orderInfo.PcStatus == 2,
					'success': this.orderInfo.PcStatus == 3,
					'completed': this.orderInfo.PcStatus == -1
				};
			},
			statusText() {
				const statusMap = {
					1: '待支付',
					2: '已支付',
					3: '已核销',
					'-1': '已退款'
				};
				return statusMap[this.orderInfo.PcStatus] || '未知状态';
			}
		},
		// ...其他代码
	};
</script>

<style lang="scss" scoped>
	.container {
		background: #f8f9fa;
		min-height: 100vh;
		padding: 20rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	/* 统一卡片样式 */
	.info-card,
	.price-card,
	.qrcode-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
	}

	.qrcode-card2 {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
	}

	/* 价格区域样式 */
	.price-card {
		.price-item {
			display: flex;
			justify-content: space-between;
			padding: 12rpx 0;
			font-size: 28rpx;

			&.total {
				border-top: 1px solid #eee;
				padding-top: 24rpx;
				margin-top: 16rpx;
			}

			.label {
				color: #909399;
			}

			.value {
				color: #606266;

				&.price-color {
					color: #e4393c;
				}

				&.total-price {
					font-size: 36rpx;
					font-weight: 600;
					color: #ff6b00;
				}
			}
		}
	}

	/* 二维码区域 */
	.qrcode-card {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 500rpx;

		&.unpaid {
			background: #fdf6ec;
		}

		&.processing {
			background: #f4f4f5;
		}

		&.success {
			background: #f0f9eb;
		}

		&.completed {
			background: #edf2ff;
		}

		.qrcode-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 24rpx;

			.status-text {
				font-size: 32rpx;
				font-weight: 500;

				.unpaid & {
					color: #e6a23c;
				}

				.processing & {
					color: #909399;
				}

				.success & {
					color: #67c23a;
				}

				.completed & {
					color: #409eff;
				}
			}

			.tip-text {
				color: #909399;
				font-size: 24rpx;
			}
		}
	}

	/* 调整u-cell组件间距 */
	::v-deep .u-cell-item {
		padding: 24rpx 0 !important;
	}
	/* 容器样式 */
	.container {
		background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
		padding: 30rpx;
	}
	
	/* 内容卡片 */
	.content-card {
		background: #fff;
		border-radius: 32rpx;
		overflow: hidden;
		box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.06);
		position: relative;
	}
	
	/* 图片区域 */
	.image-wrapper {
		position: relative;
		height: 480rpx;
	}
	
	.main-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.image-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
	}
	
	/* 标题区域 */
	.title-section {
		padding: 40rpx 30rpx 20rpx;
		position: relative;
	}
	
	.title-icon {
		position: absolute;
		left: 30rpx;
		top: -28rpx;
		background: #4f46e5;
		padding: 16rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(79, 70, 229, 0.3);
	}
	
	.item-title {
		font-size: 44rpx;
		color: #1f2937;
		font-weight: 600;
		position: relative;
	
	}
	
	.category-tag {
		font-size: 24rpx;
		background: #0055ff;
		color: #fff;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		margin-left: 20rpx;
		vertical-align: middle;
	}
	
	/* 通知卡片 */
	.notice-card {
		background: #fff5f5;
		margin: 0 30rpx 30rpx;
		padding: 20rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		border-left: 8rpx solid #e03131;
	}
	
	.item-desc {
		font-size: 28rpx;
		color: #e03131;
		margin-left: 12rpx;
	}
	
	/* 价格区域 */
	.price-section {
		display: flex;
		align-items: baseline;
		padding: 0 30rpx;
		margin-bottom: 40rpx;
	}
	
	.price-label {
		font-size: 28rpx;
		color: #6b7280;
		margin-right: 16rpx;
	}
	
	.item-price {
		font-size: 56rpx;
		color: #ef4444;
		font-weight: 700;
		position: relative;
	}
	
	.item-price::after {
	
		font-size: 24rpx;
		color: #9ca3af;
		margin-left: 8rpx;
	}
	
	/* 表单卡片 */
	.form-card {
		background: #f9fafb;
		margin: 0 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;
	}
	
	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #f3f4f6;
	}
	
	.form-item:last-child {
		border-bottom: none;
	}
	
	.form-label {
		font-size: 32rpx;
		color: #374151;
	}
	
	.date-display {
		font-size: 28rpx;
		color: #6b7280;
		background: #fff;
		padding: 8rpx 24rpx;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	/* 固定按钮 */
	.fixed-btn {
		position: fixed;
		right: 40rpx;
		bottom: calc(40rpx + env(safe-area-inset-bottom));
		z-index: 999;
		width: 300rpx;
		height: 90rpx;
		border-radius: 60rpx !important;
		background: linear-gradient(135deg, #0055ff, #0055ff) !important;
		box-shadow: 0 8rpx 24rpx rgba(79, 70, 229, 0.3);
		font-size: 32rpx;
		letter-spacing: 2rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.fixed-btn::after {
		border: none !important;
	}
	
	.fixed-btn:active {
		transform: scale(0.95) translateZ(0);
		box-shadow: 0 4rpx 12rpx rgba(79, 70, 229, 0.3);
	}
	
	/* 加载动画 */
	@keyframes pulse {
	
		0%,
		100% {
			opacity: 1;
		}
	
		50% {
			opacity: 0.5;
		}
	}
	
	.loading-placeholder {
		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
		background: #e5e7eb;
		border-radius: 8rpx;
	}
	
	
	
	
	/* 弹窗内容样式 */
	.order-modal-content {
		padding: 20rpx 30rpx;
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
		font-size: 28rpx;
	}
	
	.price {
		color: #e4393c;
		font-weight: bold;
		font-size: 36rpx;
	}
	
	/* 支付方式样式 */
	.payment-title {
		display: block;
		margin: 30rpx 0 20rpx;
		color: #666;
		font-size: 26rpx;
	}
	
	.payment-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-radius: 12rpx;
		background: #f8f8f8;
		margin-bottom: 20rpx;
		transition: all 0.3s;
	}
	
	.payment-item.active {
		background: #e6f3ff;
		border: 2rpx solid #3B71E8;
	}
	
	.payment-name {
		margin-left: 20rpx;
		flex: 1;
		font-size: 32rpx;
	}
	
	/* 底部按钮样式 */
	.confirm-footer {
			height: 100%;
		
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
<style>
	@import './canteenDetail.css'
</style>